<template>
  <div class="profile-body">
    <page-title>
      个人 Profile
    </page-title>
    <el-row class="main-row">
      <el-col :span="8">
        <div class="left-content">
          <div class="avatar-col">
            <ul class="profile-bg">
              <li class="relative">
                <span class="occupy" @mouseover="mouseOver" @mouseout="mouseOut" @click="editAvatarDialog = true">修改</span>
                <img :src="avatarUrl" alt="" class="personal-img" style="border-radius: 50%">
              </li>
              <!-- <li class="user-name">{{user.user.name}}</li>
              <li class="company-name">{{company.e_name}}</li> -->
              <li class="edit-col">
                <span style="cursor: pointer" @click="editVisible = true">编辑</span>
              </li>
            </ul>
          </div>
          <div class="base-info">
            <div class="base-info-box">
              <el-row>
                <el-col :span="8">
                  <div class="box-content">
                    <ul>
                      <!-- <li class="box-num">{{user.ehr_currentaccount}}</li> -->
                      <li class="box-num">20</li>
                      <li class="box-title">已发布</li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="box-content">
                    <ul>
                      <li class="box-num">21</li>
                      <li class="box-title">已招募</li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="box-content" style="border-right: 0">
                    <ul>
                      <li class="box-num">0</li>
                      <li class="box-title">已收藏</li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="base-info-li">
              <ul>
                <li class="info-li">
                  <span class="info-title">工号：</span>
                  <!-- <span class="info-body">{{user.ehr_jobnum}}</span> -->
                </li>
                <li class="info-li">
                  <span class="info-title">职位：</span>
                  <!-- <span class="info-body">{{user.ehr_position}}</span> -->
                </li>
                <li class="info-li">
                  <span class="info-title">微信：</span>
                  <!-- <span class="info-body">{{user.ehr_vx }}</span> -->
                </li>
              </ul>
            </div>
          </div>
      
        </div>
      </el-col>
      <el-col :span="16">
        <div class="right-content">
          <div class="right-top">
            <div class="rt-title">公司信息 Company-Information</div>
            <el-row class="rt-body">
              <el-col :span="10">
                <div class="company-info">
                  <ul>
                    <li>
                      <el-row>
                        <el-col :span="6">
                          <!-- <img :src="'http://localhost:8085/companyAvatar/'+company.e_logo" alt="" class="company-logo"> -->
                        </el-col>
                        <el-col :span="18">
                          <ul class="company-title">
                            <!-- <li class="company-title-cn">{{company.e_name}}</li> -->
                          </ul>
                        </el-col>
                      </el-row>
                    </li>
                    <li class="info-li">
                      <span class="info-title">工商注册号：</span>
                      <!-- <span class="info-body" style="margin-left: 5px">1000000{{company.e_id}}</span> -->
                    </li>
                    <li class="info-li">
                      <span class="info-title">人事部电话：</span>
                      <span class="info-body" style="margin-left: 5px">0888-88888888</span>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="info-boxes">
                  <el-row>
                    <el-col :span="12">
                      <div class="info-box">
                        <el-row>
                          <el-col :span="12">
                            <div class="left-box-content">
                              <ul>
                                <li><i class="el-icon-s-claim icon"></i>在招岗位</li>
                                <li class="box-en">Position</li>
                              </ul>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <!-- <div class="box-num_1">{{company.companyHrList[0].ehr_currentaccount}}</div> -->
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="info-box">
                        <el-row>
                          <el-col :span="12">
                            <div class="left-box-content">
                              <ul>
                                <li><i class="el-icon-s-custom icon"></i>HR总数</li>
                                <li class="box-en">Hire</li>
                              </ul>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <!-- <div class="box-num_1">{{company.companyHrList[0].hr_account}}</div> -->
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
            <div class="right-bottom">
              <div class="rt-title rb-special">招募折线 Recruitment-Line</div>
              <div id="bar_dv" ref="chart" :style="{width: '100%', height: '300px'}"></div>
            </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="30%">
      <div class="upload-div">
        <el-upload
          ref="upload"
          action="http://localhost:8085/hire/hire_profile/avatar"
          :data="uploadData"
          list-type="picture-card"
          :limit="1"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editAvatarDialog = false">取 消</el-button>
        <el-button type="primary" @click="editAvatarDialog = false,handleUpload ()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="基本信息编辑" :visible.sync="editVisible">
      <el-form :model="user">
        <el-row>
          <el-col :span="12">
            <div class="left-form">
              <div class="form-li">
                <el-row>
                  <el-col :span="5" class="form-title">工号：</el-col>
                  <el-col :span="19" class="form-body">
                    <!-- <el-input v-model="user.id" placeholder="请输入姓名" disabled></el-input> -->
                  </el-col>
                </el-row>
              </div>
              <div class="form-li">
                <el-row>
                  <el-col :span="5" class="form-title">姓名：</el-col>
                  <el-col :span="19" class="form-body">
                    <!-- <el-input v-model="user.user.name" placeholder="请输入姓名"></el-input> -->
                  </el-col>
                </el-row>
              </div>
              <div class="form-li">
                <el-row>
                  <el-col :span="5" class="form-title">电话：</el-col>
                  <el-col :span="19" class="form-body">
                    <!-- <el-input v-model="user.user.phone" placeholder="请输入电话"></el-input> -->
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="right-form">
              <div class="form-li">
                <el-row>
                  <el-col :span="5" class="form-title">微信：</el-col>
                  <el-col :span="19" class="form-body">
                    <!-- <el-input v-model="user.ehr_vx" placeholder="请输入微信"></el-input> -->
                  </el-col>
                </el-row>
              </div>
              <div class="form-li">
                <el-row>
                  <el-col :span="5" class="form-title">职位：</el-col>
                  <el-col :span="19" class="form-body">
                    <!-- <el-input v-model="user.position" placeholder="请输入职位"></el-input> -->
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEdit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 导入PageTitle模块
import PageTitle from "../../components/hire-system/title/PageTitle";
// 导入ChatBox模块
import ChatBox from "../../components/hire-system/community/ChatBox";
// 导入ChatContent模块
import ChatContent from "../../components/hire-system/community/ChatContent";
export default {
  name: "chats",
  components: {ChatContent, ChatBox, PageTitle},
  data() {
    return {
      search: '',
      show_chat: '1',
      connect_index: 0,
      chat_boxes: [
        {
          index: 0,
          id: '10001',
          avatar: require('../../assets/img/avatar/avatar02.png'),
          name: '马小超',
          // 聊天内容
          communities: [
            {
              // 信息id号
              m_id: '01',
              // 发送方或接收方判定(0是用户发送过来的，1是hr发送过去的)
              m_flag: 1,
              // 接收方id
              m_s_id: "10001",
              // 发送方id
              m_r_id: "10001",
              // 信息时间
              m_time: '2021-07-25 15:17:07',
              // 内容
              m_content: '山不在高，有仙则名。水不在深，有龙则灵。'
            },
            {
              m_id: '02',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2008-06-25 15:18:08',
              m_content: '斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。'
            },
            {
              m_id: '03',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2020-08-25 15:18:08',
              m_content: '谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。'
            },
            {
              m_id: '04',
              m_flag: 1,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2019-08-25 15:18:08',
              m_content: '无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？'
            }
          ]
        },
        {
          index: 1,
          id: '10002',
          avatar: require('../../assets/img/avatar/avatar01.png'),
          name: '余三胖',
          // 聊天内容
          communities: [
            {
              m_id: '01',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:10:07',
              m_content: '寒蝉凄切，对长亭晚，骤雨初歇。'
            },
            {
              m_id: '02',
              m_flag: 1,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:10:08',
              m_content: '都门帐饮无绪，留恋处，兰舟催发。'
            },
            {
              m_id: '03',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:10:09',
              m_content: '执手相看泪眼，竟无语凝噎。'
            },
            {
              m_id: '04',
              m_flag: 1,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:10:10',
              m_content: '念去去，千里烟波，暮霭沉沉楚天阔。'
            },
            {
              m_id: '05',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:11:10',
              m_content: '多情自古伤离别，更那堪，冷落清秋节！'
            },
            {
              m_id: '06',
              m_flag: 1,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:11:11',
              m_content: '今宵酒醒何处？杨柳岸，晓风残月。'
            },
            {
              m_id: '07',
              m_flag: 0,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:13:21',
              m_content: '此去经年，应是良辰好景虚设。'
            },
            {
              m_id: '08',
              m_flag: 1,
              m_s_id: "10001",
              m_r_id: "10001",
              m_time: '2021-03-05 15:13:22',
              m_content: '便纵有千种风情，更与何人说？'
            }
          ]
        },
      ]
    }
  },
  methods: {
    mouseOver() {
      const dom = document.getElementById("new_btn");
      dom.style.backgroundColor = "#f3f3f3";
    },
    mouseOut() {
      const dom = document.getElementById("new_btn");
      dom.style.backgroundColor = "#ffffff";
    },
    // 获取子组件传来的值
    getFromChild(index) {
      this.connect_index = index
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/hire-system/profile.css";
</style>
